/*
 * @Author: jhw
 * @Date: 2025-08-15 12:44:28
 * @LastEditors: jhw
 * @LastEditTime: 2025-08-15 14:01:38
 * @Description:
 */
import { defineComponent, inject, type PropType } from 'vue';
import { ElSwitch } from 'element-plus';
import type { StringStatusArr, UpdateStatus, VueComType } from '@/types';

export interface IsRequireProps {
  currentStatus: number;
  status: StringStatusArr;
  isShow: boolean;
  configKey: string;
  editCom: VueComType;
  id: string;
}

export const IsRequireEditor = defineComponent({
  name: 'IsRequireEditor',
  props: {
    currentStatus: Number as PropType<IsRequireProps['currentStatus']>,
    status: Array as PropType<IsRequireProps['status']>,
    isShow: Boolean as PropType<IsRequireProps['isShow']>,
    configKey: String as PropType<IsRequireProps['configKey']>,
    editCom: Object as PropType<IsRequireProps['editCom']>,
    id: String as PropType<IsRequireProps['id']>,
  },
  setup(props) {
    const updateStatus = inject<UpdateStatus>('updateStatus');

    const onChange = (value: any) => {
      if (updateStatus) {
        updateStatus(props.configKey!, value);
      } else {
        console.error('updateStatus is not found');
      }
    };
    return () => {
      return (
        <div class="flex items-center justify-between">
          <div class="flex items-center">
            <div class="mr-20px">是否必填 </div>
          </div>
          <div>
            <ElSwitch
              modelValue={props.currentStatus}
              onChange={(value) => onChange(value)}
              activeValue={1}
              inactiveValue={0}
            />
          </div>
        </div>
      );
    };
  },
});
